import { useInsertionEffect } from 'react';
import { useState, useRef, useLayoutEffect } from 'react';
function App() {
//   useInsertionEffect(() => {
//     // 创建并注入样式
//     const style = document.createElement('style');
//     style.innerHTML = `
//       .dynamic-element {
//         color: #3498db;
//         background-color: #f8f9fa;
//         padding: 16px;
//         border-radius: 8px;
//         transition: all 0.3s ease;
//       }
//     `;
//     document.head.appendChild(style);
    
//     // 清理函数
//     return () => {
//       document.head.removeChild(style);
//     };
//   }, []);

//   return (
//     <div className="dynamic-element">
//       <h2>动态样式组件</h2>
//       <p>此组件的样式由 useInsertionEffect 动态注入</p>
//     </div>
//   );

const [width, setWidth] = useState(0);
const elementRef = useRef(null);
//在 DOM 更新之后，但在浏览器绘制之前同步执行
useLayoutEffect(() => {
  if (elementRef.current) {
    // 测量元素尺寸
    const { width } = elementRef.current.getBoundingClientRect();
    console.log(width);
    setWidth(width);
    
    // 基于测量结果调整布局
    if (width < 600) {
      elementRef.current.style.fontSize = '14px';
    } else {
      elementRef.current.style.fontSize = '18px';
    }
  }
}, []); // 空依赖数组表示只在初始渲染时运行

return (
  <div ref={elementRef}>
    <p>元素宽度: {Math.round(width)}px</p>
    <p>根据宽度动态调整字体大小</p>
  </div>
);
}

export default App;